<template>
	<view style="height: 100vh;display: flex;flex-direction: column;">
		<!-- 自定义导航 -->
		<view class="d-flex a-center" style="height: 90rpx;">
			<!-- 左边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<!-- 中间 -->
			<view class="flex-1 bg-light rounded d-flex a-center text-light-muted" style="height: 65rpx;" @click="openSearch">
				<text class="iconfont icon-sousuo mx-2"></text>
				智能积木
			</view>
			<!-- 右边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<text class="iconfont icon-richscan_icon"></text>
			</view>
		</view>
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x class="border-bottom scroll-row" style="height: 80rpx;" :scroll-into-view="scrollinto"
			:scroll-with-animation="true">
			<view class="scroll-row-item px-3" @click="changeTab(index)" style="height: 80rpx; line-height: 80rpx;"
				v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'main-text-color' : ''"
				:id="'tab'+index">
				<text class="font-md">{{item.name}}</text>
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" :style="'height: ' +scrollH+'px;'" @change="onChangeTab">
			<swiper-item v-for="(item,index) in newsitems" :key="index">
				<scroll-view scroll-y="true" :style="'height: ' +scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length > 0">
						<block v-for="(list,listIndex) in item.list" :key="listIndex">
							<!-- 轮播图组件 -->
							<swiper-image v-if="list.type === 'swiper'" :resdata="list.data" />

							<template v-else-if="list.type === 'indexnav'">
								<!-- 首页分类 -->
								<index-nav :resdata="list.data" />

								<!-- 全局分割线 -->
								<divider />
							</template>

							<template v-else-if="list.type === 'threeAdv'">
								<!-- 三图广告位 -->
								<three-adv :resdata="list.data" />
								<divider />
							</template>
							<!-- 大图广告位 -->
							<template v-else-if="list.type === 'oneAdv'">
								<card bodyCover="/static/images/demo/demo4.jpg" />
							</template>
							<!-- 公共列表组件 -->
							<view v-else-if="list.type === 'list'" class="row j-sb">
								<block v-for="(item2,index2) in list.data" :key="index2">
									<common-list :item="item2" index="index2"></common-list>
								</block>

							</view>
						</block>
						<!-- 上拉加载更多 -->
						<divider />
						<!-- #ifdef APP-NVUE -->
						<loading class="j-center a-center" style="height: 80rpx;width: 750rpx;" @loading="onLoading"
							:display="item.loadingShow">
							<text class="text-muted font-md">{{item.loadtext}}</text>
						</loading>
						<!-- #endif -->
						<!-- #ifndef APP-NVUE -->
						<view class="d-flex a-center j-center py-3"><text
								class="font-md text-light-muted">{{item.loadtext}}</text></view>
							<!-- #endif -->
					</template>

					<view v-else-if="item.firstLoad === 'before' || item.firstLoad === 'ing'"
						class="d-flex j-center a-center pt-5"><text class="font-md text-light-muted">加载中...</text>
					</view>
					<view v-else class="d-flex j-center a-center pt-5"><text
							class="font-md text-light-muted">暂无数据</text></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	import threeAdv from '@/components/index/three-adv.vue';
	import swiperImage from '@/components/index/swiper-image.vue';
	import indexNav from '@/components/index/index-nav.vue';
	import card from "@/components/common/card.vue";
	import $H from '@/common/lib/request.js';
	import commonList from "@/components/common/common-list.vue"
	export default {
		components: {
			swiperImage,
			indexNav,
			threeAdv,
			card,
			commonList
		},
		data() {
			return {
				token:"",
				scrollinto: "",
				scrollH: 500,
				tabIndex: 0,
				tabBars: [],
				newsitems: []


			}
		},
		onLoad() {
			// 获取可视区域高度
			uni.getSystemInfo({
				success: (res) => {
					// #ifndef MP
					let navbarH = 0
					// #endif
					// #ifdef MP
					let navbarH = uni.upx2px(90)
					// #endif
					this.scrollH = res.windowHeight - uni.upx2px(82) - navbarH
				}
			})
			// 初始化事件
			this.__init()
		},
		methods: {
			openSearch(){
				uni.navigateTo({
					url: '../search/search',
				});
			},
			__init() {
				// 获取顶部选项卡
				$H.get('/index_category/data').then((res) => {
					this.tabBars = res.category;
					// 根据顶部选项卡生成页面
					let arr = []
					for (var i = 0; i < this.tabBars.length; i++) {
						let firstLoad = i === 0 ? 'after' : 'before'
						let obj = {
							list: [],
							// 1.上拉加载更多 2.加载中... 3.没有更多了
							loadtext: "上拉加载更多",
							// 首次加载：before加载前，after加载后，ing加载中
							firstLoad: firstLoad,
							refreshShow: 'hide',
							refreshText: '下拉可以刷新',
							loadingShow: 'hide',
						}
						// 获取首屏数据
						if (i === 0) {
							obj.list = res.data
						}

						arr.push(obj)
					}
					this.newsitems = arr
				})
			},
			// 点击选项卡
			changeTab(index) {
				console.log(index);
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollinto = 'tab' + index
				if(this.newsitems[index].firstLoad === 'after'){
					return;
				}
				this.addData()
			},
			// 监听滑动列表
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 加载数据
			async addData(callback = false, refresh = false) {
				// 拿到当前索引
				let index = this.tabIndex
				let obj = this.newsitems[index]
				console.log(obj);
				console.log(this.tabBars);
				// 拿到当前分类id
				let id = this.tabBars[index].id
				console.log(id);
				// 拿到当前分类的分页数
				let page = !refresh ? (Math.ceil(obj.list.length / 5) + 1) : 1

				// 请求前
				if (page === 1 && obj.refreshShow === 'hide') {
					obj.loadtext = 'ing'
				}
				// 请求数据
				let data = await $H.get('/index_category/'+id+'/data/'+page)
				// 请求完数据
				console.log(data);
				obj.firstLoad = 'after'
				if (page === 1 && obj.refreshShow === 'hide') {
					obj.firstLoad = 'after'
				}

				if (data) {
					// 赋值
					console.log(obj.list);
					obj.list = !refresh ? [...obj.list,...data] : data
					obj.loadtext = data.length < 5 ? '没有更多了' : '上拉加载更多'
				}
				// 执行回调函数
				if (typeof callback === 'function') {
					callback()
				}
			},
			// 上拉加载事件
			onLoading(){
				// 存储当前索引
				var index = this.tabIndex
				let item = this.newsitems[index]
				item.loadingShow = 'show';
				// 没有更多了
				if (item.loadingText === '没有更多了') {
					uni.showToast({ title: '没有更多了', icon: 'none' });
					return item.loadingShow = 'hide';
				}
				// 加载数据
				this.addData(()=>{
					uni.showToast({ title: '加载成功', icon: 'none' });
					item.loadingShow = 'hide';
				});
			},
			// 上拉加载更多
			// loadmore(index) {
			// 	let item = this.newsitems[index];
			// 	console.log(item.loadtext);
			// 	// 是否处于可加载状态''
			// 	if (item.loadtext !== "上拉加载更多") {
			// 		return;
			// 	}
			// 	// 加载更多数据
			// 	item.loadtext = "加载中..."
			// 	console.log(item.loadtext);
			// 	this.addData(() => {
			// 		uni.showToast({
			// 			title: '加载成功'
			// 		})
			// 	})
			// 	item.loadtext = "上拉加载更多"
			// },
			// 执行刷新
			refresh(e){
				// 存储当前索引
				var index = this.tabIndex
				this.newsitems[index].refreshShow = 'show';
				this.newsitems[index].refreshText = '正在刷新...';
				// 请求刷新数据
				this.addData(()=>{
					uni.showToast({ title: '下拉刷新成功',icon:"none" });
					this.newsitems[index].refreshShow = 'hide';
					this.newsitems[index].refreshText = '下拉可以刷新';
				},true)
			},
			// 判断下拉刷新状态
			pullingdown(e){
				var index = this.tabIndex
				this.newsitems[index].refreshText = e.pullingDistance > e.viewHeight ? '释放就能刷新咯' : '下拉可以刷新';
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>